﻿<template>
  <div class="Adventure" ref ="el"> 
    <header class="Adventure_header">
      <img src="../../static/img/goback_header_left_act.png" class="goback_img" v-on:click="goback_img">
      <img v-bind:src="user_img_header|judge_and_add_Base" class="user_img">
      <div class="card_title">
       {{big_title}}
      </div>
     <!--<div id="triangle-down"></div>-->
    </header>
    <Adventure_visit_core @music_show ="music_show" @img_max_show ="img_max_show" @show_q="show_q" :q_data='qes_data'></Adventure_visit_core>
    <div class="music_box" v-show="music_show_d" v-on:click.self="music_show">
      <div class="music_box_main">
        <div class="music_line">
          <div class="music_line_play" v-bind:style="{width:line_p_w+'%'}">
            
          </div>
          <div class="music_w">
            <div v-show="img_s">{{music_w}}</div>
            <div v-show="!img_s&&!finish_recoed_flag">{{music_w}}</div>
            <div v-show="!img_s" style="display:flex;position:relative;width:100%;">
              <span class="" style="font-size:0.9rem;" v-on:click="record_play" v-show="!img_s&&finish_recoed_flag&&!stop_play"> 播放录音 </span>
              <!--stop_play s-->
              <img src="../../static/img/stop.png" v-show="stop_play" class="btn_music_img" v-on:click="pause_play" style="width:4vw;height:1rem;line-height:1rem;margin-top:0.3rem;margin-left:1vw;">
              <!--stop_play e-->
              <img src="../../static/img/start.png" style="width:4vw;height:1rem;line-height:1rem;margin-top:0.3rem;margin-left:1vw;"  v-show="!img_s&&finish_recoed_flag&&!stop_play">
            </div>
          </div>
        </div>
        <div class="btn_music">
          <div class="delete_voice_btn" v-show="!img_s&&finish_recoed_flag"  v-on:click.self="delect_d">
            X
          </div> 
          <img src="../../static/img/start.png"v-show="img_s" class="btn_music_img" v-on:click="music_c">
          <img src="../../static/img/stop.png" v-show="!img_s&&!finish_recoed_flag" class="btn_music_img"  v-on:click="done_record">
        </div>
        <div class="btn_w">
          <span v-show="!img_s&&finish_recoed_flag">删除</span>
          <span v-show="!img_s&&!finish_recoed_flag" >完成</span>
          <span v-show="img_s">开始</span>
        </div>
        <div class="upd">
          提交
        </div>
      </div>
    </div>
    <!-- show_max s -->
    <div class="show_max" v-show="show_max" v-on:click="hide_show_max">
      <img v-bind:src="bind_show_img" ref="show_max_img">
    </div>
    <!-- show_max e -->
    <!-- q s -->
    <div class="ck_q" v-on:click="close_ck_q" v-show="close_ck_q_d" ref="qs">
      <div class="bg_c" v-for="qs_list in qs_list" v-on:click="change_qs(qs_list.problemContent)">
       {{qs_list.problemContent}}
      </div>
    </div>
    <!-- q e -->
    <!--<div class="bottom_btn_wrapper">
      <img src="../../static/img/collect.png">
      <img src="../../static/img/share.png">
      <img src="../../static/img/pre_page.png">
      <img src="../../static/img/next_page.png">
    </div>-->
  </div>
   
</template>

<script>
  import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
  //limit_Scroll
  import { Toast, Indicator, MessageBox } from 'mint-ui';
  import Adventure_visit_core from "./Adventure_visit_core.vue"
  import qs from 'qs';
  import style from "../../static/css/mint-ui/style.css"
  import axios from 'axios'
  import Vue from "vue";
  import limit_scroll from "../../static/js/limit_scroll.js"
  import common from "../common/common.js"
  axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8'
  Vue.prototype.$http = axios
  export default {
    name: 'Detail_Exchange',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        img_s: true,
        music_show_d: false,
        show_max: false,
        bind_show_img: "",
        qs_list:"",
        close_ck_q_d:false,//问题参考
        qes_data: "",//提交和显示的问题
        music_w: "录音",//时间轴显示的时间
        music_w_show: false,
        finish_recoed_flag: false,
        record_voice: null,//录音保存
        line_p_w: "100",//时常线
        setInterval_id: "",//时间轴动画id
        stop_play: false,//显示暂停
        index_v_list: "",//next btn list
        big_title: "",//主分类
        user_img_header: "",//user_img_header
        user_list_data: "",//用户信息
        index_page:""//当前index
      }
    },
    props: ['show'],
    beforeCreate: function () {

    },
    methods: {
      //返回
      goback_img: function () {
        this.$router.back(-1);
      },
      //暂停 播放
      pause_play: function () {
        if (this.record_voice) return;
        wx.pauseVoice({
          localId: this.record_voice // 需要暂停的音频的本地ID，由stopRecord接口获得
        });
        this.stop_play = false;
      },
      //删除录音
      delect_d: function () {
        this.record_voice = null//清空录音
       // this.music_w = 0 //时间轴显示的时间
        this.music_w = "录音";
        this.finish_recoed_flag = false//flag
        this.img_s = true;//变回开始
        this.stop_play = false // 录音暂停图标隐藏
      },
      //完成录音
      done_record: function () {
        this.finish_recoed_flag = true;
        //停止录音
        wx.stopRecord({
          success: (res) => {
            //语音
            this.record_voice = res.localId;
            //停止时间轴动画
            clearInterval(this.setInterval_id)
          }
        });
      },
      //显示 问题参考
      show_q: function () {
        this.close_ck_q_d = true;
      },
      //隐藏问题 参考
      close_ck_q: function () {
        this.close_ck_q_d = false
      },
      img_max_show: function (img) {
        this.show_max = true//显示show max
        this.bind_show_img = img
      },
      chang_state_b_recoed() {
        
      },
      //上传语言
      up_load_recoed() {
        if (this.record_voice == null) return;
        wx.uploadVoice({
          localId: this.record_voice , // 需要上传的音频的本地ID，由stopRecord接口获得
          isShowProgressTips: 1,// 默认为1，显示进度提示
          success: function (res) {
            var serverId = res.serverId; // 返回音频的服务器端ID
          }
        });
      },
      //播放录音
      record_play: function () {
        if (this.record_voice == null) {
         // alert("路由id为空")
          return;
        }
        //显示可以暂停
        this.stop_play = true;
        //监听语音播放完毕接口
        wx.onVoicePlayEnd({
          success: function (res) {
            this.stop_play = false;
            var localId = res.localId; // 返回音频的本地ID
          }
        });
        wx.playVoice({
          localId: this.record_voice // 需要播放的音频的本地ID，由stopRecord接口获得
        });
      },
      music_c: function () {
        this.img_s = !this.img_s;
        if (this.img_s == false) {
          //开始录音
         // alert("开始露营")
          this.music_w = "录音中";
          wx.startRecord();
        } else {
          // 录音时间超过一分钟没有停止的时候会执行 complete 回调
          wx.onVoiceRecordEnd({
            complete: (res) => {
              //alert("录音完成");
              //语音
              this.record_voice = res.localId;
              //出现删除语音标志 和 动画状态
              this.done_record();
              //停止时间轴动画
              clearInterval(this.setInterval_id)
            }
          });
        }
      },
      music_show: function () {
        this.music_show_d = !this.music_show_d 
      },
      hide_show_max: function () {
        this.show_max = false;
      },
      change_qs: function (e) {
        this.qes_data = e
      }
    },
    components: {

    },
    mounted: function () {
      this.big_title = "";
      //card_mess s
      //this.index_v_list = JSON.parse(sessionStorage.getItem("card_mess"));
      this.user_id = JSON.parse(sessionStorage.getItem("user_id"));
      this.add_card_list = JSON.parse(sessionStorage.getItem("add_card_list"))//所有卡片id
      this.user_list_data = JSON.parse(sessionStorage.getItem("user_list_data"))//用户信息


      //设置 group_name
      this.big_title = this.user_id.groupName
      this.user_img_header = this.user_list_data.image

      limit_scroll(this.$refs.el, this.$refs.el);
      limit_scroll(this.$refs.qs, this.$refs.el);
      let id = common.get_user_id();


      //获取微信 conifg 
      //获取 参考问题
      Indicator.open();
      this.$http.post('/yizhiweimen/api/user/adventurecard/getAdventurecard',
        qs.stringify(
          {
            uid:id
          })
      )
      .catch((thrown) => {
          Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
          });
        }).then((e) => {
          //记录id
          //this.qs_list = e.data
        })

      //获取分享配置
      let url = location.href;
      url = url.split("#")[0]
      this.$http.post('/api/wxUtil/getSign',
        qs.stringify(
          {
            "url": url
          })
         )
        .then((e) => {
          // 上面两个请求都完成后，才执行这个回调方法
          Indicator.close();
          let data = e.data
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: data.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
            timestamp: data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.nonceStr, // 必填，生成签名的随机串
            signature: data.signature,// 必填，签名，见附录1
            jsApiList: ["startRecord", "stopRecord", "onVoiceRecordEnd", "playVoice", "pauseVoice", "stopVoice", "onVoicePlayEnd","uploadVoice"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          });
        })
        .catch((e) => {
          Indicator.close();
          console.log(e)
          Toast({
            message: "网络出22错",
            position: 'bottom',
            duration: 2000
          });
        })
    
    },
    components: {
      Adventure_visit_core
    }
  }
</script>
<style scoped>
  /*bottom_btn_wrapper s*/
  .bottom_btn_wrapper{
    position:absolute;
    bottom:6vw;
    left:50%;
    transform:translate(-50%);
  }
  /*bottom_btn_wrapper e*/
  /*bottom_btn s*/
  .bottom_btn_wrapper img {
    width: 20vw;
    height: 9vw;
  } 
  .bottom_btn_wrapper {
    width: 88vw;
    height: 8vw;
    margin: 0 auto;
    display: flex;
    justify-content:space-around;
  } 
  .bottom_btn {
    width: 88vw;
    height: 8vw;
  }
  /*bottom_btn e*/
  /*Adventure_header s*/
  .card_title{
    color:#fff;
  } 
  .tri_img {
    width: 4vw;
    height:4vw;
  } 
  .user_img {
    height: 9vw;
    width: 9vw;
    border-radius: 50%;
    margin-top: 0.7vw;
    border: 1px #fff solid;
    margin-right: 4.2vw;
  } 
  .goback_img {
    width: 5.3vw;
    height: 5vw;
    margin-right: 8.8vw;
    margin-top: 3.3vw;
    margin-left: 3.2vw;
  }
  #triangle-down {
    margin-top:4vw;
    margin-left:1.7vw;
    width: 0;
    height: 0;
    border-left: 2.5vw solid transparent;
    border-right:2.5vw solid transparent;
    border-top: 4vw solid #fff;
  }
  .Adventure_header {
    width: 100%;
    display: flex;
    height: 11.3vw;
    line-height: 11.3vw;
    background-color: #9f5c2f;
    font-weight:normal;
  }
  /*Adventure_header e*/
  /*delete_voice_btn*/
  .delete_voice_btn {
    top: 2rem;
    margin: 0.6rem auto 0;
    /*transform:translate(-50%,-50%);*/
    width: 2rem;
    line-height: 2rem;
    height: 2rem;
    color: #fff;
    font-size: 1.5rem;
    background-color: #e85454;
    border-radius: 50%;
    right: 4vw;
  }
  /*delete_voice_btn*/
  /*参考问题s*/
  .bg_c {
    background-color: #9f5c2f;
    width: 70vw;
    text-align: center;
    line-height: 2rem;
    color: #fff;
    margin: 1rem auto;
    border-radius: 2vw;
  }
  .ck_q {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    background-color: rgba(0,0,0,0.8)
  } 
/*参考问题 e*/
  .show_max img {
    width: 80vw;
    max-height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
  .show_max{
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,1);
    position:absolute;
    top:0;
    left:0;
   
  } 
  .mint-swipe .swipe .mint-swipe-indicator .is-active {
    background: #9f5c2f;
  } 
  .Adventure {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-image: url("../../static/img/ad_bg_img.png")
  } 
  .upd {
    width: 25.8vw;
    height: 2rem;
    line-height: 2rem;
    font-size: 1rem;
    color: #fff;
    background-color: #e85454;
    margin: 1rem auto 0.55rem;
    border-radius: 1.4vw;
  } 
  .music_w {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  } 
  .music_box {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    top: 0;
    left: 0;
    position: absolute;
  }
  .music_box_main{
    width:70vw;
  
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background-color:#fff;
    border-radius:3vw;
  }
  .music_box_main_header {
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    color: #9f5c2f;
    font-size:1.2rem;
    margin-top:2rem;
  }
  .music_line {
    width: 44.2vw;
    margin: 1.2rem auto 0;
    height: 1.5rem;
    line-height: 1.5rem;
    border: 2px solid #9f5c2f;
    border-radius: 4vw;
    color: #9f5c2f;
    position:relative;
    overflow:hidden;
  }
  .music_line_play {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    /*width: 80%;*/
    font-size:1rem;
    text-align:center;
    background-color: #fee9cb;
  } 
  .btn_music {
   
  }
  /*.start{
    background-image:url("../../static/img/start.png");
    background-size:contain;
    background-repeat:no-repeat;
    
  }
  .stop {
    background-image: url("../../static/img/stop.png");
    background-size: contain;
    background-repeat: no-repeat;
  }*/
  .btn_music_img {
    width: 5vw;
    height: 1.05rem;
    margin: 1rem auto 0.1rem;
  } 
  .btn_w {
    color: #c9c9c9;
    font-size: 0.7rem;
    text-align: center;
    margin-top: 0.2rem;
  }

</style>
